<template>
  <div>
    <div>
      <div>
        <el-row :gutter="20">
          <el-col :span="12"><div class="grid-content ep-bg-purple" style="color: #909399" >
            <!-- <div style="margin-top: 15px;">
              <div class="list-left">创建者：</div><div style="display: inline-block;" class="user-clas"><el-icon style="color:#c6e2ff"><UserFilled /></el-icon>张磊</div>
            </div> -->
            <div style="margin-top: 15px;">
              <div class="list-left">创建时间：</div><div style="display: inline-block;color:#000">{{ data.create_time }}</div>
            </div>
            <div style="margin-top: 15px;">
              <div class="list-left">推送规则：</div><div style="display: inline-block;color:#000">{{ data.send_type==1 ? '定时推送' :'周期推送'  }}</div>
            </div>
            <div style="margin-top: 15px;">
              <div class="list-left">任务名称：</div><div style="display: inline-block;color:#000">{{ data.name }}</div>
            </div>
            <div style="margin-top: 15px;">
              <div class="list-left">执行群聊：</div><div style="display: inline-block;color:#000">【
                  <span v-for="(item,index) in data.group_list">{{ item.name }} <span v-if="index !== data.group_list.length - 1">,</span></span>
                】
                <!-- <span style="color:#409EFF;cursor:pointer;" @click="editsopapi">查看</span> -->
              </div>
            </div>
          </div></el-col>
          <el-col :span="12"><div class="grid-content ep-bg-purple" style="color: #909399" >
           
          </div>
        </el-col>
        </el-row>
      </div>
      <div style="display: block;width: 1300px;overflow:hidden;" v-for="(item,index) in data.send_content">
        <div style="height: 300px;margin-top: 20px;float: left;">
          <el-steps direction="vertical" :active="1">
            <el-step title="" :icon="AlarmClock" >
             
              </el-step>
            <el-step :icon="1" />
          </el-steps>
          
        </div>
        <div style="float: left;margin-top: 20px;width: 70%;" >
          <div>规则{{index + 1}}：{{ item.name }}</div>
          <div v-if="data.send_type == 1">加入规格后<span>{{item.size}}{{item.type == 1?'小时':item.type == 2?'天':'周'}}{{item.time}}分</span>后提醒发送</div>
          <div v-if="data.send_type == 2">加入规格后<span>{{item.size}}{{item.type == 4?'天':item.type == 5?'周':'月'}}{{item.time}}分</span>后提醒发送</div>
          <div style="background-color: #f4f4f5;padding: 15px;margin-top: 20px;">
            <div class="form-classs">设置规则名称：</div>
            <div class="news">{{ item.name }}</div>
            <div>
              <div class="form-classs">规则内容</div>
              <div v-for=" err in item.content">
                <div class="news" v-if="err.type == 1" style="margin-top: 15px;">
                  {{ err.text }}
                </div>
                <div v-if="err.type == 2" style="margin-top: 15px;">
                  <img :src="err.url" style="width: 60px;" />
                </div>
                <div  v-if="err.type == 3" style="margin-top: 15px;">
                  <div style="width: 300px;border: 1px solid #fff;border-radius: 4px;padding: 6px;">
                    <div class="app-flex-2">
                      <div>
                        <el-tag type="primary" class="app-primary-font">
                        链接
                        </el-tag>
                        <span class="app-gap-words-left-s">{{err.link_title}}</span>
                      </div>
                      <!-- <div class="a-check-circle">
                        <MyIcon v-if="selectIndex==index" style="color:#999 !important" name="Check" />
                      </div> -->
                    </div>
                    <div class="app-flex-2" style="margin-top:8px">
                      <div style="width: calc(100% - 80px);">
                        <div class="word-esp">
                          {{err.link_title}}
                        </div>
                        <div class="inline-desc word-esp">
                          {{err.link_desc}}
                        </div>
                      </div>
                      <el-image class="box-80" :src="err.link_picurl" fit="contain" />
                    </div>
                    
                    
                  </div>
                </div>
              </div>
            </div>
            <div v-for="ites in item.content" style="margin-top: 15px;">
             <!-- <div v-if="ites.type == 1">
              {{ item.text }}
             </div>
             <div v-if="ites.type == 2">
              <img style="width: 200px;" :src="ites.url" />
             </div>
             <div v-if="ites.type == 3">
              {{ item.link_title }}
             </div> -->
            </div>
            <div class="form-classs">企微待提醒群聊：（{{item.n_send_size}}）</div>
            <div style="background-color: #fff;padding: 7px;width: 300px;margin-top: 15px;display: inline-block;margin-left: 15px;margin-top: 15px;" v-for="items in item.n_send">
              <div style="display: inline-block;width: 50px;height: 50px;border: 1px solid #eee;margin-right: 7px;">
                <img src="../../../../assets/img/img/avatar-room-default.67bead38e751.svg" />
              </div>
              <div style="display: inline-block;">
                <div>{{ items.group_name }}</div>
                <div>群主:<span style="color:  #73767a">{{ items.staff_name }}</span></div>
              </div>
            </div>
            <div class="form-classs" style="margin-top: 15px;">企微已提醒群聊：（{{item.y_send_size}}）</div>
            <div style="background-color: #fff;padding: 7px;width: 300px;margin-top: 15px;display: inline-block;margin-left: 15px;margin-top: 15px;" v-for="items in item.y_send">
              <div style="display: inline-block;width: 50px;height: 50px;border: 1px solid #eee;margin-right: 7px;">
                <img src="../../../../assets/img/img/avatar-room-default.67bead38e751.svg" />
              </div>
              <div style="display: inline-block;">
                <div>{{ items.group_name }}</div>
                <div>群主:<span style="color:  #73767a">{{ items.staff_name }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <editsop ref="edit"></editsop>
</template>
<script setup>
  import { AlarmClock } from '@element-plus/icons-vue'
  import { ref,reactive,onMounted } from "vue";
import editsop from '../../../../components/app/groupchat.vue'
import { reqSopGroupDetail } from '@/api'
import { useRoute, useRouter } from 'vue-router'
const router = useRoute()
const edit = ref(null)
const editsopapi =(val)=>{
  var data = {
    show:true,
    id:val,
    name:val.name
  }
  edit.value.editshow(data)
}
const data = ref(
  {
  create_time: '',
group_condition_new: '',
group_condition_new_end: '',
group_condition_new_start: '',
group_condition_tag: '',
group_condition_tag_list: [],
group_condition_type: '',
group_list: [],
group_type: '',
groupid: [],
id: '',
name: '',
send_content: [],
send_endtime_date: '',
send_endtime_date_type: '',
send_endtime_size: '',
send_endtime_time: '',
send_endtime_type: '',
send_starttime: '',
send_starttime_type: '',
send_type: '',
status: '',
update_time: '',
wid: '',
})
onMounted(()=>{
  console.log(router.query.id)
  reqSopGroupDetail({id:router.query.id}).then(res=>{
    data.value=res.data
  })
})
</script>
<style>
.box-80{
  width: 40px;
  height:  40px;
}
  .news{
    width: 60%;
    height: 30px;
    line-height: 30px;
    /* border-radius: 15px; */
    background-color: #fff;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:15px;
    margin-bottom: 15px;
    margin-top: 10px;
    padding-left: 10px;
  }
    .form-classs{
    padding-left: 5px;
    border-left: 3px solid #409EFF;
    color: #000000;
  }
.list-left{
  display: inline-block;
  width: 100px;
  text-align: right;
}
.user-clas{
  border: 1px solid #eee;
  padding: 3px 5px;
}
.app-flex-2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.app-primary-font{
  color:var(--primary-color) !important;
}
.app-gap-words-left-s {
	margin-left: var(--app-block-margin-s);
}
.a-check-circle{
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  font-size: 12px;
  color: #999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.word-esp{
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
.inline-desc{
  color: #999;
  font-size: 14px;
}
.box-200{
  padding: 8px;
  width:200px;
  background-color: #ededed;
}
</style>